<template>
    <div class="common-layout">
        <el-container class="index-con">
            <el-header class="index-header">
                <SysHeader />
            </el-header>
            <el-container>
                <el-aside class="asideshow">
                    <LeftNav />
                </el-aside>
                <el-main>
                    <Breadcrumb />
                    <div class="main">
                        <el-card>
                            <router-view></router-view>
                        </el-card>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import LeftNav from '@/components/LeftNav.vue';
import SysHeader from '@/components/SysHeader.vue';
import Breadcrumb from '../components/Breadcrumb.vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()
const routes = computed(() => route.matched.map(item => ({
    path: item.path,
    title: item.meta.title
})))
</script>
<style scoped>
.index-con {
    width: 100vw;
    height: 100vh;
}

.index-con > .el-container {
    height: calc(100vh - 60px);
}

.asideshow {
    width: 240px;
    background-color: #f5f7fa;
}

.index-header {
    padding: 0;
    background-color: #409EFF;
    color: white;
}

.main {
    height: calc(100% - 30px);
    margin-top: 10px;
    background-color: #f0f2f5;
}
</style>